<template>
  <div>
    <div class="container-box">
      <div class="tableName">
        <p>通知公告/编辑通知公告</p>
      </div>
      <div class="table-search" v-for="(item, index) in content" :key="index">
        <div class="title">
          <label for="" class="input-label" style=" vertical-align:center">标题:</label>
          <p>{{ item.noticeTitle }}</p>
        </div>
        <div class="title">
          <label for="" style=" vertical-align:top">内容:</label>
          <p>{{ item.noticeContent }}</p>
        </div>
        <div class="title">
          <label for="" style=" vertical-align:top">创建人:</label>
          <p>{{ item.createPeople }}</p>
        </div>
        <div class="title">
          <label for="" style=" vertical-align:top">创建日期:</label>
          <p>{{ item.createDate }}</p>
        </div>
        <div class="btn-box">
          <div class="send"><button style="background-color:#fff;color:#333 ;border:1px soild #e4e4e4;"
              @click="edit()">编辑</button><button
              style="background-color:rgb(64,158,255);color:#fff; border:none;">删除</button><button
              style="background-color:rgb(64,158,255);color:#fff;border:none;" @click="quit">返回</button></div>
        </div>
        <div class="img">
          <img src="./pub.svg" alt="">
          <span class="text">待发布</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent,onMounted,reactive,toRefs} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from '@/util/http'
export default defineComponent({
    name:'addnotice',
    setup(){
      const router = useRouter()
      const noticeContext = reactive({
        content:[]
      })
      // const noticeId = useRouter().currentRoute.query.noticeId
      const noticeId =useRouter().currentRoute._value.query.noticeId
      const quit = ()=>{
        router.push('/notice')
      }
      const edit = ()=>{
        router.push({name:'Addnotice',query:{noticeId:noticeId}})
      }
      onMounted(async()=>{
        await axios({method:'get',url:'notice/detailsNotice',params:{noticeId:noticeId}}).then((res)=>{
          noticeContext.content = res.data.data.data
          
        })
      })
      const delNotice = ()=>{
        ElMessageBox.confirm(
          '是否确认删除该公告？',
          '删除确认',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then( async () => {
           await axios({method:'post',url:'/notice/delNotice',params:{noticeId}}).then((res)=>{
          router.push('/notice')
            })
            ElMessage({
              type: 'success',
              message: 'Delete completed',
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: 'Delete canceled',
            })
          })
      }
return{
  quit,edit,...toRefs(noticeContext),delNotice
}
    }
    
})
</script>

<style scoped lang="less">
.text {
  position: absolute;
  top: 32px;
  right: 20px;
  transform: rotate(44deg);
}

.img {
  border-width: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 97px;
  height: 100px;
}

label {
  float: left;
  color: #333;
  font-size: 13px;
  margin-right: 10px;
  display: block;
  width: 55px;
}

p {
  padding-left: 100px;
  width: 80%;
  color: #000;
  font-size: 13px;
}

textarea {
  width: 828px;
  height: 380px;
  border: 1px solid #e4e4e4;
  resize: none;
  outline: none;
  color: rgb(188, 188, 188);
}

.container-box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  color: #333;
  font-size: 13px;
}

.tableName {
  height: 45px;
  box-sizing: border-box;
  padding: 14px 0px;
}

.table-search {
  position: relative;
  box-sizing: border-box;
  padding: 40px 100px;
  border-width: 0px;
  /* position: absolute;
    left: 0px;
    top: 0px; */
  width: 100%;
  height: 845px;
  background: inherit;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 4px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Microsoft Tai Le Regular', 'Microsoft Tai Le', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #666666;
  text-align: left;
  line-height: 18px;
}

.title {
  margin-bottom: 40px;
}

.btn-box {
  display: flex;
  justify-content: center;
  padding-top: 256px;
  color: #fff;
}

/deep/.btn-box>.send>button {
  margin-left: 20px;
  padding: 12px 32px;
  border-radius: 5px;
  border-color: #e4e4e4;
}</style>